<template>
  <div class="topicDetail">
    <!-- <img :src="detail.pc_cover_image" alt="" class="banner"> -->
    <Banner ref="banner" />
    <div class="content">
      <div
        class="rich-text"
        v-html="detail.content"
      />
      <Goods ref="goods" />
    </div>
    <img
      v-if="gotop"
      src="../assets/img/totop.png"
      alt=""
      class="top"
      @click="toTop"
    >
  </div>
</template>

<script>
import Banner from "../components/topic/Detailbanner.vue";
import Goods from "../components/topic/goods.vue";
export default {
  name: "",
  components: {
    Goods,
    Banner,
  },
  data() {
    return {
      detail: {},
      gotop: false,
    };
  },
  watch: {
    "$route.query.id": function () {
      this.getData();
    },
  },
  mounted() {
    this.getData();
    window.addEventListener("scroll", this.handleScroll, true);
  },
  methods: {
    getData() {
      let mid = "";
      if (localStorage.getItem("userInfo")) {
        mid = JSON.parse(localStorage.getItem("userInfo")).mid;
      }
      let param = {
        topic_id: this.$route.query.id,
        uid: mid,
      };

      this.$api.home.detail(param).then((res) => {
        if (res.code == 1) {
          this.detail = res.data;
          this.$refs.banner.setData(res.data);
          this.$refs.goods.getData(res.data);
        }
      });
    },
    handleScroll() {
      let scrolltop =
        document.documentElement.scrollTop || document.body.scrollTop;
      scrolltop > 50 ? (this.gotop = true) : (this.gotop = false);
    },
    toTop() {
      let top = document.documentElement.scrollTop || document.body.scrollTop;
      // 实现滚动效果
      const timeTop = setInterval(() => {
        document.body.scrollTop = document.documentElement.scrollTop = top -= 50;
        if (top <= 0) {
          clearInterval(timeTop);
        }
      }, 10);
    },
  },
};
</script>

<style lang="scss" scoped>
.topicDetail {
  .banner {
    width: 100%;
    height: 42rem;
  }
  .content {
    padding: 0 16.19rem;
    margin-top: 2.19rem;
    display: flex;
    flex-direction: column;
    & > img {
      width: 100%;
    }
  }
  .top {
    z-index: 999;
    position: fixed;
    top: 45%;
    right: 8%;
    width: 4.94rem;
    height: 4.94rem;
  }
}
</style>
